<?php
include_once '../fn.php';
loginCheck();
$flag = 'comments';

// 从数据库获取评论数据，一次10条

// 构造查询串
$sql = "select comments.*,posts.title from comments join posts on comments.post_id = posts.id limit 0,10;";
$result = my_query($sql);

// echo '<pre>';
// print_r($result);
// echo '</pre>';
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Comments &laquo; Admin</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <script src="../assets/vendors/nprogress/nprogress.js"></script>
</head>

<body>
    <script>
        NProgress.start()
    </script>

    <div class="main">
        <nav class="navbar">
            <button class="btn btn-default navbar-btn fa fa-bars"></button>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li>
                <li><a href="login.php"><i class="fa fa-sign-out"></i>退出</a></li>
            </ul>
        </nav>
        <div class="container-fluid">
            <div class="page-title">
                <h1>所有评论</h1>
            </div>
            <!-- 有错误信息时展示 -->
            <!-- <div class="alert alert-danger">
                =<strong>错误！</strong>发生XXX错误
                </div> -->
            <div class="page-action">
                <!-- show when multiple checked -->
                <div class="btn-batch pull-left" style="display: none">
                    <button class="btn btn-info btn-sm approveall">批量批准</button>
                    <button class="btn btn-danger btn-sm deleteall">批量删除</button>
                </div>
                <!-- <ul class="pagination pagination-sm pull-right">
                        <li><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">下一页</a></li>
                    </ul> -->
                <div id="pagination" class="pagination pagination-sm pull-right">

                </div>
            </div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th class="text-center" width="40"><input type="checkbox"></th>
                        <th>作者</th>
                        <th>评论</th>
                        <th>评论在</th>
                        <th>提交于</th>
                        <th>状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody pageflag="1">

                    <!-- 模板引擎的模板 -->
                    <script type="text/html" id="tmp">

                    {{ each data v i }}
                    <tr>
                        <td class="text-center"><input type="checkbox"></td>
                        <td>{{ v.author }}</td>
                        <!-- 模板引擎内调用截取字符串方法规范格式... -->
                        <td>{{ v.content.substr(0,20)+'...' }}</td>
                        <td>《{{ v.title }}》</td>
                        <td>{{ v.created }}</td>
                        <!-- 类似翻译的效果...网页中英文切换.. -->
                        <td>{{ state[v.status] }}</td>
                        <td class="text-right" data-id="{{ v.id }}">
                            {{ if v.status =='held' }}
                            <a href="javascript:;" class="btn btn-info btn-xs btn-approved">批准</a>
                            {{ /if }}
                            <a href="javascript:;" class="btn btn-danger btn-xs btn-delete">删除</a>
                        </td>
                    </tr>
                    {{ /each }}

                    </script>

                </tbody>
            </table>
        </div>
    </div>

    <!-- 引入公共侧边栏 -->
    <?php include './inc/aside.php'; ?>

    <script src="../assets/vendors/jquery/jquery.js"></script>
    <script src="../assets/vendors/bootstrap/js/bootstrap.js"></script>
    <script>
        NProgress.done()
    </script>
    <!-- 导入模板引擎 -->
    <script src="../assets/vendors/template/template-web.js"></script>
    <!-- 导入分页插件相关文件 -->
    <script src="../other/pagination/jquery.pagination.js"></script>
    <link href="../other/pagination/pagination.css" rel="stylesheet" type="text/css" />
    <script>
        // 存储评论的状态
        // 用这个对象包裹从数据库中取出来的英文,就 翻译成了 中文
        var state = {
            held: '待审核',
            approved: '准许',
            rejected: '拒绝',
            trashed: '回收站'
        }

        // 封装一个请求指定页面的数据的渲染
        function render(page) {
            // 使用模板引擎来动态渲染评论数据，并不采用php的刷新页面动态渲染
            // 调用获取评论接口
            $.ajax({
                type: 'get',
                data: {
                    page: page,
                    pageSize: 10
                },
                url: './comment/comGet.php',
                dataType: 'json',
                success: function(info) {
                    // console.log(info);
                    // 构建模板引擎对象
                    // 模板只能使用obj传递的数据，把外部定义好的评论翻译对象也包装包obj中
                    var obj = {
                        data: info,
                        state: state
                    };
                    // 调用模板引擎
                    var str = template('tmp', obj);
                    $('tbody').html(str);
                }
            });
        }

        render(1);

        // -----------------------------------------------------------
        // 分页插件使用(从后台获取分页数..然后用分页插件渲染)
        // 封装一个分页标签渲染函数
        function setPage(page) {

            $.ajax({
                url: './comment/comTotal.php',
                dataType: 'json',
                success: function(info) {
                    // console.log(info);
                    var total = info.total;
                    $('tbody').attr('comTotal', total);
                    $('#pagination').pagination(total, {
                        prev_text: "« 上一页",
                        next_text: "下一页 »",
                        num_display_entries: 5,
                        num_edge_entries: 1,
                        load_first_page: false,
                        current_page: page - 1 || 0,
                        callback: function(index, paginationDOM) {
                            console.log(index); //是按钮的索引值，页码值需要+1 
                            render(index + 1);
                            // 给tbody上标记记录显示的第几页
                            $('tbody').attr('pageflag', index + 1);

                            // 将全选按钮重置
                            $('th>input').prop('checked', false);
                            // 将批量处理按钮重置
                            $('.btn-batch').css('display', 'none');

                        }
                    });
                }
            });

        }

        setPage(1);

        // -------------------------------------------------------------
        // 批准功能的实现

        // 事件委托
        // 给还没有出生元素绑定事件，把事件委托给一个已经存在的父元素
        // 模板引擎的html元素基本不能直接用click绑定事件，用on来绑定事件
        $('tbody').on('click', '.btn-approved', function() {
            // console.log('1');
            // console.log(this);

            var index = $(this).parent().attr('data-id');
            // console.log(index);
            $.ajax({
                type: 'get',
                url: './comment/comApproved.php',
                data: {
                    id: index
                },
                dataType: 'text',
                success: function() {
                    //请求成功后重新渲染评论
                    // 直接用render()重绘评论
                    render($('tbody').attr('pageflag'));
                }
            })
        });

        // --------------------------------------------------------------
        // 删除功能的实现
        $('tbody').on('click', '.btn-delete', function() {
            $.ajax({
                type: 'get',
                url: './comment/comDelete.php',
                data: {
                    id: $(this).parent().attr('data-id')
                },
                dataType: 'text',
                success: function(info) {
                    // 删除数据后，要判断数据删完没

                    var comtotal = $('tbody').attr('comtotal') - 1;
                    $('tbody').attr('comtotal', comtotal);
                    // if (comtotal==0) {// 第一页删完了，渲染为空即可
                    //     $('tbody').html('');
                    // }else if(comtotal%10==0){// 最后一页删完了，就将pageflag="1"减1，评论的展示不能是空的
                    //     render($('tbody').attr('pageflag')-1);
                    //     setPage($('tbody').attr('pageflag')-1);
                    //     $('tbody').attr('pageflag',$('tbody').attr('pageflag')-1);//自减1
                    // }else {// 其他情况直接渲染
                    //     render($('tbody').attr('pageflag'));
                    // }
                    if (Math.ceil(comtotal / 10) < $('tbody').attr('pageflag')) {
                        $('tbody').attr('pageflag', Math.ceil(comtotal / 10));
                        setPage($('tbody').attr('pageflag'));
                    }
                    // setPage($('tbody').attr('pageflag'));
                    render($('tbody').attr('pageflag'));
                    setPage($('tbody').attr('pageflag'));

                }
            });
        });

        // -------------------------------------------------------------------
        // 全选功能的实现

        // 全选点击--小复选框跟全选框checked属性值一致
        $('th>input').change(function() {
            // console.log('改变了');
            $('td>input').prop('checked', $(this).prop('checked'));

            // 判断批量按钮的显示与隐藏 
            if ($(this).prop('checked')) {
                $('.btn-batch').css('display', 'block');
            } else {
                $('.btn-batch').css('display', 'none');
            }
        });

        // 小复选框点击--小复选框点击后判断全选框的状态--on绑在tbody上
        $('tbody').on('change', 'td>input', function() {
            // console.log('改变了'); 
            // 先获取 $('td>input')的总数量
            // 判断勾选上的数量与总数比较，再决定全选框状态 
            // 获取被选中的复选框个数: $('td>input:checked/disabled').length
            var checkedCount = 0;
            $('td>input').each(function(index, domEle) {
                // console.log(domEle);
                checkedCount += $(domEle).prop('checked');
            });

            if (checkedCount == $('td>input').length) {
                $('th>input').prop('checked', true);
            } else {
                $('th>input').prop('checked', false);
            }
            // console.log(checkedCount);

            // 判断批量按钮的显示与隐藏 
            if (checkedCount > 0) {
                $('.btn-batch').css('display', 'block');
            } else {
                $('.btn-batch').css('display', 'none');
            }
        });

        // -----------------------------------------------------------------
        // 下面这种模拟点击的方式性能差，还无法跨页数操作

        // 批量批准功能实现
        $('.approveall').on('click', function() {
            // var data = [];//容器存储可以批准的id
            // console.log('被点了');
            // 从已经选择的数据中，提取处于批准状态的数据
            // console.log($('td>input:checked'));
            $('td>input:checked').each(function(index, domEle) {
                // 遍历 复选框被选中的盒子，判断能否批准
                var res = $(domEle).parent().siblings('.text-right').children('.btn-approved');
                if (res.length == 1) {
                    // 模拟点击事件
                    $(domEle).parent().siblings('.text-right').children('.btn-approved').trigger('click');
                }
            });

            // console.log(data);

            // 与后台通信批准，或者模拟点击事件
            // ...

            // 批准完要重置checkbox
            $('.text-center>input').prop('checked', false);
        })

        // 批量删除功能实现--跟上面类似
        $('.deleteall').on('click', function() {
            // console.log(11);

            $('td>input:checked').each(function(index, domEle) {
                // 模拟点击事件
                $(domEle).parent().siblings('.text-right').children('.btn-delete').trigger('click');
            });

            // 删除完要重置checkbox
            $('.text-center>input').prop('checked', false);
        });
    </script>
</body>

</html>